<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="piano.css">
    <link rel="icon" href="piano-logo.png">
</head>

<body>
    <div id="piano">
        <div class="head">
            <h1 class="title">
                <svg class="logo" viewBox="0 0 24 24" width="35" height="35" fill="white">
                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 11.5h.25V19h-4.5v-4.5H10c.55 0 1-.45 1-1V5h2v8.5c0 .55.45 1 1 1zM5 5h2v8.5c0 .55.45 1 1 1h.25V19H5V5zm14 14h-3.25v-4.5H16c.55 0 1-.45 1-1V5h2v14z"/>
                </svg>
                Piano
            </h1>
        </div>
        
        <div class="keys">
            <!-- First Octave -->
            <div class="key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>

            <!-- Second Octave -->
            <div class="key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>

            <!-- Third Octave -->
            <div class="key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
            <div class="key black-key">
                <div class="key-effect"></div>
                <div class="note-symbol">♪</div>
            </div>
        </div>
    </div>
</body>
</html>